<template>
  <div>
    <span>haahah</span>
      <el-row>
      <el-col :span="16">
        <div class="link_1">
          <el-link type="primary" href="#/" :underline="false" class="l_link">贾豆</el-link>
          <el-link type="warning" href="#/reading" :underline="false" class="l_link">读书</el-link>
          <el-link type="success" href="#/music" :underline="false" class="l_link">音乐</el-link>
          <el-link type="danger" href="#/movie" :underline="false" class="l_link">电影</el-link>
          <el-link type="primary" href="#/beanindex" :underline="false" class="l_link">豆品</el-link>
          <el-link type="warning" :underline="false" class="l_link">同城</el-link>
          <el-link type="success" :underline="false" class="l_link">小组</el-link>
          <el-link type="danger" :underline="false" class="l_link">阅读</el-link>
          <el-link type="info" href="#/" :underline="false" class="l_link">关于我们</el-link>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="link_1">
          <el-link type="primary" href="#/read" :underline="false" class="l_link" style="margin-left: 80px">下载客户端
          </el-link>
          <el-link type="primary" href="#/read" :underline="false" class="l_link">登录/注册</el-link>
        </div>
      </el-col>
    </el-row>
    <!--搜索-->
    <el-row>
      <el-col :span="24">
        <div class="header_1">
          <el-row>
            <el-col :span="24">
              <div class="header_2">
                <el-row>
                  <el-col :span="4" :offset="2">
                    <div class="header_2">
                      <div>贾豆音乐</div>
                    </div>
                  </el-col>
                  <el-col :span="10" :offset="1">
                    <div class="search">
                      <el-input type="text" v-model="input" placeholder="唱片名、表演者" style="width: 70%;float: left"/>
                      <el-button icon="el-icon-search" style="float: left;margin-top: 26px;margin-left: 30px" circle>
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
                <!--音乐连接-->
                <el-row>
                  <el-col :span="22" :offset="2">
                    <div class="movie_link">
                      <el-link href="#/" :underline="false" class="m_link">音乐人</el-link>
                      <el-link href="#/" :underline="false" class="m_link">潮潮豆瓣音乐周</el-link>
                      <el-link href="#/" :underline="false" class="m_link">金羊毛计划</el-link>
                      <el-link :underline="false" class="m_link">排行榜</el-link>
                      <el-link :underline="false" class="m_link">专题</el-link>
                      <el-link :underline="false" class="m_link">乐评</el-link>
                      <el-link :underline="false" class="m_link">2019年度榜单</el-link>
                      <el-link :underline="false" class="m_link">阿比鹿音乐奖</el-link>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
     <!--main-->
    <el-row>
      <el-col :span="22" :offset="2">
        <div class="product_title">
          {{musics.zname}}<span style="color: moccasin">(2020)</span>
        </div>
      </el-col>
    </el-row>
    <!---->
    <el-row>
      <el-col :span="24">
        <div class="product_box">
          <el-col :span="5" :offset="2" >
            <div style="margin-left: 10px">
              <el-image style="height:260px;width: 200px" :src="musics.zsrc"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="product_content">
              <div class="content">表演者：<a href="#/">{{musics.actor}}</a></div>           
               <div class="content">流派：<a href="#/">{{musics.liu_pai}}</a></div>
              <div class="content">专辑类型：<a href="#/">{{musics.lei_xing}}</a></div>
              <div class="content">发行时间：<span>{{musics.time}}</span></div>
              <div class="content">出版者：<span>{{musics.address}}</span></div>            
            </div>
          </el-col>
          <el-col :span="11">
            <div>
             <el-image :src="url" ></el-image>                
            </div>
          </el-col>         
        </div>
      </el-col>
    </el-row>
        <el-row>
      <el-col :span="22" :offset="2">
        <div class="pf">
          <el-col :span="2">
            <div class="pf_1">
              <el-button type="warning" circle>想听</el-button>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="pf_1">
              <el-button type="warning" circle>听过</el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="pf_2">
              评价
              <div class="block">
                <el-rate class="pfx"/>
              </div>
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22" :offset="2">
        <div class="pl">
          <el-col :span="2">
            <div>
              <el-link href="#/" :underline="false" icon="el-icon-chat-line-round">写短评</el-link>
            </div>
          </el-col>
          <el-col :span="2">
            <div>
              <el-link href="#/" :underline="false" icon="el-icon-edit">写乐评</el-link>
            </div>
          </el-col>
          <el-col :span="2" :offset="6">
            <div>
              <button style="background-color: moccasin">推荐</button>
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" :offset="3">
          <div class="content_box" >
              <div class="content_title">
                 {{musics.zname}}的剧情简介 . . . . . .
              </div>
              <div class="content_content">
               {{musics.jian_jie}}
              </div>
          </div>       
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22" :offset="2">
        <div class="pl_title">
          {{musics.zname}}的短评. . . . . .
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="22" :offset="2">
        <div class="pl_content">
          <el-col>
            <div class="pl_p">
              <a href="#">一贫如洗王道长</a>
            </div>
            <div class="pl_p">
              看过
            </div>
            <div class="pl_p" style="color: silver">
              2020-05-01
            </div>
          </el-col>
          <el-col :span="22" :offset="2">
            <div class="pl_c">
              Phd风评被害。。。
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="22" :offset="2">
        <div class="pl_content">
          <el-col>
            <div class="pl_p">
              <a href="#">cece</a>
            </div>
            <div class="pl_p">
              看过
            </div>
            <div class="pl_p" style="color: silver">
              2020-05-01
            </div>
          </el-col>
          <el-col :span="22" :offset="2">
            <div class="pl_c">
              并不是我有多勇敢，画出这看似出格的一笔，而是因为这本就是我的一部分。
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="22" :offset="2">
        <div class="pl_content">
          <el-col>
            <div class="pl_p">
              <a href="#">南赫</a>
            </div>
            <div class="pl_p">
              看过
            </div>
            <div class="pl_p" style="color: silver">
              2020-05-01
            </div>
          </el-col>
          <el-col :span="22" :offset="2">
            <div class="pl_c">
              和十六年前相比，青少年爱情反而多了一点复杂和成熟。这“狗血”的大三角拍得还挺有趣。BTW，细腻且有趣的直男真是太少了
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-bottom: 30px">
      <el-col :span="22" :offset="2">
        <div class="pl_content">
          <el-col>
            <div class="pl_p">
              <a href="#">桃桃林琳</a>
            </div>
            <div class="pl_p">
              看过
            </div>
            <div class="pl_p" style="color: silver">
              2020-05-01
            </div>
          </el-col>
          <el-col :span="22" :offset="2">
            <div class="pl_c">
              “大鼻子情圣”乱入“蓝色大门”，他爱她也爱她而她爱她的故事。三个主角都很可爱，就像一个可爱的等边三角形。若干年后他们会无比怀念这段校园时光吧，墙上的涂鸦、一起泡的温泉、帮着抠开的养乐多，还有那个追火车的人——点点滴滴都是青春...（就性取向话题而言，跟“面子”相比是倒退了，这个倒退与伍思薇的个人能力无关，而在于美国的右转）
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>

    <!--footer-->
    <el-row>
      <el-col :span="24">
        <div class="footer">
          © 2020－2020 jiadou.com, all rights reserved
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:"details",
  data(){
    
    return{
      input:"",
      url:"https://tpc.googlesyndication.com/simgad/403696836377346818?sqp=4sqPyQQ7QjkqNxABHQAAtEIgASgBMAk4A0DwkwlYAWBfcAKAAQGIAQGdAQAAgD-oAQGwAYCt4gS4AV_FAS2ynT4&rs=AOga4qkA5Uy5fF2GrQXdGNYlzgMIWVB7xw",
      musics:{
        
        zname:"",
        zrc:"",
        actor:"",
        liu_pai:"",
        lei_xing:"",
        time:"",
        address:"",
        jian_jie:"",
      }
      
    }   
  },
  mounted:function(){
    
    var id =this.$route.params.id
    
      var _this=this
      axios.get('/bean/findByYid/'+id).then(function(res){
        _this.musics=res.data
        
      })

  }
}
</script>
 

<style>
  .link_1 {
    height: 30px;
    background-color: #545652;
  }

  .l_link {
    line-height: 30px;
    font-size: 14px;
    margin: 0 15px;
    float: left;
    color: whitesmoke;
  }

  .m_link {
    line-height: 30px;
    font-size: 14px;
    margin: 0 15px;
    float: left;
    color: blue;
  }
  .n_link {
    line-height: 40px;
    font-size: 14px;
    margin: 0 10px;
    float: left;
    color: darkgray;
  }

  .header_1 {
    height: 140px;
    background-color: azure;
    /*border: 1px solid darkgreen;*/
    margin-bottom: 15px;
  }

  .header_2 {
    height: 90px;
    font-weight: bold;
    font-size: 36px;
    color: skyblue;
    line-height: 90px;
    /*border: 1px solid darkblue;*/
  }

  .movie_link {
    /*border: 1px solid darkgoldenrod;*/
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
  }
    .product_title {
    /*border: 1px solid skyblue;*/
    height: 60px;
    line-height: 60px;
    font-weight: bold;
    font-size: 25px;
    float: left;
    margin-left: 33px;
    margin-bottom: 10px;
  }

  .product_box {
    height: 260px;
    /*border: 1px solid darkgoldenrod;*/
    margin-bottom: 30px;
  }

  .product_content {
    height: 260px;
    border-right: 1px solid silver;
    float: left;
  }

  .content {
    width: 300px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: left;
  }
  .content_box {
    height: 260px;
    /*border: 1px solid skyblue;*/
  }

  .content_title {
    height: 50px;
    line-height: 50px;
    /*border: 1px solid skyblue;*/
    text-align: left;
    font-size: 22px;
    color: green;
    margin-top: 10px;
  }

  .content_content {
    height: 210px;
    color: black;
    text-align: left;
    margin-top: 10px;
    /*首行缩进*/
    text-indent: 3em;
    /*字体间距*/
    letter-spacing: 2px;
    line-height: 20px;
    width: 1000px;
    margin-left: 20px;
  }
  .pf {
    /*border: 1px solid skyblue;*/
    height: 40px;
    margin-left: 34px;
  }

  .pf_1 {
    height: 40px;
    line-height: 40px;
    /*border: 1px solid darkgoldenrod;*/
    float: left;
  }

  .pf_2 {
    height: 40px;
    line-height: 40px;
    /*border: 1px solid darkgoldenrod;*/
    float: left;
    font-size: 14px;
  }
  .pl_title {
    height: 60px;
    text-align: left;
    line-height: 60px;
    border-bottom: 1px solid silver;
    width: 85%;
    margin-left: 35px;
    color: green;

    font-size: 20px;
  }

  .pl_content {
    height: 100px;
    text-align: left;
    border-bottom: 1px solid silver;
    width: 85%;
    margin-left: 35px;
    font-size: 14px;
  }

  .pl_p{
    float: left;
    margin: 12px 10px 5px 0px;
  }

</style>
